<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax-loader</title>
<script type="text/javascript" src="/nalpariUtils/js/jquery-1.7.2.js"></script>
<style type="text/css">
	#target{
		width: 300px;
		height: 300px;
		border: 1px dotted blue;
		background-color: #00ffff;
	}
	
	#loading{
		border:0;
		display:none;
		text-align: center;
		background: #FFFFF0;
		filter: alpha(opacity=60);
		opacity: alpha*0.6;
	}
</style>
<script type="text/javascript">
//<![CDATA[
	jQuery(function(){
		
	});
	
	function fncCallAjax(){
		$.ajax({
			type : "POST" //"POST", "GET"
			, async : true //true, false
			, url : "/nalpariUtils/ajaxLoader/ajax.jsp" //Request URL
				//, dataType : "html"  //전송받을 데이터의 타입
				//"xml", "html", "script", "json" 등 지정 가능
				//미지정시 자동 판단
			, timeout : 30000 //제한시간 지정
			, cache : false  //true, false
			, data : 'param1=asdf'
				//$("#inputForm").serialize() //서버에 보낼 파라메터
				//form에 serialize() 실행시 a=b&c=d 형태로 생성되며 한글은 UTF-8 방식으로 인코딩
				//"a=b&c=d" 문자열로 직접 입력 가능
			, contentType: "application/x-www-form-urlencoded; charset=UTF-8"
			, error : function(request, status, error) {
				//통신 에러 발생시 처리
				alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
			}
			, success : function(response, status, request) {
				//통신 성공시 처리
				$('#target').html(response);
			}
			, beforeSend: function() {
				var padingTop = (Number(($('#target').css('height')).replace("px","")) / 2) - 20;
				//통신을 시작할때 처리
				$('#loading').css('position', 'absolute');
				$('#loading').css('left', $('#target').offset().left);
				$('#loading').css('top', $('#target').offset().top);
				$('#loading').css('width', $('#target').css('width'));
				$('#loading').css('height', $('#target').css('height'));
				$('#loading').css('padding-top', padingTop);
				$('#loading').show().fadeIn('fast');
			}
			, complete: function() {
				//통신이 완료된 후 처리
				$('#loading').fadeOut();
			}
		});
	}
//]]>
</script>
</head>
<body>
	<div id="contents">
		<a href="javascript:fncCallAjax();">ajax 호출</a>
	</div>
	<div id="target"></div>
	<div id="loading">
		<img src="/nalpariUtils/ajaxLoader/images/ajax-loader.gif" width="24" height="24" />
	</div>
</body>
</html>